<template>
  <div>
    <v-list class="py-0" dense>
      <v-list-item-group color="primary">
        <template v-for="(item, i) in items">
          <v-list-item v-if="item.title" :key="i">
            <v-list-item-content>
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </v-list-item-content>
            <span
              class="caption text--secondary"
              v-if="item.extraInfo"
              v-text="item.extraInfo"
            ></span>
            <v-list-item-icon>
              <v-icon>mdi-chevron-right</v-icon>
            </v-list-item-icon>
          </v-list-item>
          <v-divider v-else-if="item.divider" :key="i"></v-divider>
          <div v-if="item.lineSpace" class="line-space" :key="i"></div>
        </template>
      </v-list-item-group>
    </v-list>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data: () => ({
    items: [
      {
        title: '个人信息'
      },
      {
        divider: true
      },
      {
        title: '修改密码'
      },
      {
        divider: true
      },
      {
        title: '修改手机',
        extraInfo: '180****1849'
      },
      {
        divider: true
      },
      {
        lineSpace: true
      },
      {
        title: '我的会员'
      },
      {
        divider: true
      }
    ]
  }),
  methods: {
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onMenuItemClick() {}
  }
};
</script>
